<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<script type="text/javascript">
    $(document).ready(function() {
        $("[id$=Desc]").dialog({
            autoOpen: false,
            width: 400,
            position: "right"
        });
        $("#ldPlotLink").click(function() {
            $("#ldPlotDesc").dialog("open");
        });
    });
</script>
<div id="tutorial" class="content">
    <h2>Tutorial</h2>
    <ol>
        <li>
            <h3 id="geneList">Gene List Page</h3>
            <tiles:insert name="geneListHelp" />
            <p>
                Clicking on a gene takes you to the corresponding <a href="#snpList">SNP List Page</a> for that gene.
            </p>
        </li>
        <li>
            <h3 id="associationResults">Association Results Page</h3>
            <tiles:insert name="assocResultsHelp" />
            <img src="images/tutorial/associationSearch.png" alt="Association Search Page" />
            <p>
                The y-axis represents the -log<sub>10</sub>(corrected p-value) and are ordered
                by chromosome on the x-axis. Moving the cursor over a point will display
                the p-value, gene and rsnumber for the SNP that generated the p-value.
                Clicking on a point will take you to the  <a href="#snpSummary">SNP Summary Page</a> for that particular
                SNP.
            </p>
            <img src="images/tutorial/chartviewer.png" alt="Association Page" />
        </li>
        <li>
            <h3 id="snpList">SNP List Page</h3>
            <p>
                The <em>SNP List</em> page contains an information table for SNPs that were found
                in a gene selected through the <a href="#geneList">Gene List Page</a> or those that matched
                the search criteria entered in the <a href="#snpSearch">SNP Search Page</a>.
            </p>
            <p>
                The table displays the rsnumber, gene, chromosome, and genotyping status
                for each SNP. The genotyping status shows if the SNP passed genotyping QC
                for each cohort or if the SNP was not genotyped (NA). The table can be
                sorted by any of columns by clicking on the column header.
            </p>
        </li>
        <li>
            <h3 id="snpSummary">SNP Summary Page</h3>
            <tiles:insert name="snpSummaryHelp" />
            <tiles:insert name="snpSummaryGeneral" />
            <tiles:insert name="snpSummaryPrevAssoc" />
            <tiles:insert name="snpSummaryGenotype" />
            <tiles:insert name="snpSummaryAssocResults" />
            <tiles:insert name="snpSummaryPopDiver" />
        </li>
        <li>
            <h3 id="pathwayResult">Pathway Result List Page</h3>
            <p>
                The <em>Pathway Results List</em> page contains a list of Kegg pathways that selected genes and/or SNPs were found to be involved in.
                Moving the mouse over a pathway link brings up a pop-up window listing the genes found within the pathway.
            </p>
            <img src="images/tutorial/pathway%20results%20page.png" alt="Pathway Result List Page" />
            <p>
                Clicking on a pathway takes you to the corresponding <em>Kegg Pathway</em> page, where user may view an image of the the Kegg
                pathway, select genes of interest, view the corresponding SNP list page for selected genes, view the associations plot
                for selected genes, and/or select two SNPs to perform a SNP-SNP interaction test.
            </p>
        </li>
        <li>
            <h3 id="keggPathwayPage">Kegg Pathway Page</h3>
            <tiles:insert name="keggPathwayHelp" />
            <img src="images/tutorial/kegg%20pathway%20page.png" alt="Kegg Pathway Page" />
        </li>
        <li>
            <h3 id="geneGeneParameter">Gene Gene Interaction Parameters Page</h3>
            <tiles:insert name="geneGeneParamHelp" />
        </li>
        <li>
            <h3 id="AnalysisJobLinkPage">Analysis Job Link Page</h3>
            <tiles:insert name="analyJobLinkHelp" />
            <img src="images/tutorial/analysis%20job%20link%20page.png" alt="Analysis Job Link Page" />
        </li>
        <li>
            <h3 id="AnalysisResultsPage">Analysis Results Page</h3>
            <tiles:insert name="analyResultsHelp" />
            <img src="images/tutorial/analysis%20results%20page.png" alt="Analysis Results Page" />
        </li>
    </ol>
</div>
<tiles:insert name="ldPlotDesc" />